<template>
  <div class="app-container">
    <div class="block">
      <el-date-picker v-model="datevalue" type="datetimerange" :picker-options="pickerOptions" range-separator="至"
        start-placeholder="开始日期" end-placeholder="结束日期" align="right">
      </el-date-picker>
    </div>
    <el-row type="flex" justify="space-between">
      <el-col :span="12" class="col-box">
        <div class="col-box-tip">油耗分析表：</div>
        <div><pie-chart :chartData="list" /></div>
      </el-col>
      <el-col :span="12" class="col-box">
        <div class="col-box-tip">行驶里程分析表：</div>
        <div><pie-chart :chartData="list" /></div>
      </el-col>
    </el-row>
    <el-table :data="tableData" border class="detail-table">
      <el-table-column prop="name" label="车辆名称">
      </el-table-column>
      <el-table-column prop="number" label="车辆号码">
      </el-table-column>
      <el-table-column prop="consumption" label="油耗(L)">
      </el-table-column>
      <el-table-column prop="mileage" label="行驶里程(KM)">
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { number } from 'echarts';
import PieChart from './components/PieChart';
import { arealist } from "@/api/system/area";
export default {
  name: "detail",
  components: {
    PieChart,
  },
  data() {
    return {
      pickerOptions: {
        shortcuts: [{
          text: '今天',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 1);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近7天',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      datevalue: [new Date().getTime() - 3600 * 1000 * 24 * 1, new Date()],
      list: [],
      tableData: [
        {
          name: '小三轮',
          number: '粤A888888',
          consumption: 28,
          mileage: 10000
        },
      ]
    };
  },
  created() { },
  methods: {}
};
</script>
<style lang="scss" scoped>
.block {
  text-align: right;
  margin-bottom: 20px;
}

.col-box {
  margin: 0 10px;
  border: 1px solid rgb(17, 17, 17);
}

.col-box-tip {
  margin: 10px;
}
.detail-table{
  margin: 50px auto;
  width: 80%;
}
</style>
